<template>
	<view class="base-page">
		<u-notify ref="uNotify"></u-notify> <!-- 通知横幅 -->
		<u-modal :show="showcheck" title="信息审核中" content="请等待审核完成" :closeOnClickOverlay="true"
			@confirm="showcheck = false" @close="showcheck = false"></u-modal> <!-- 提示审核中模态框 -->
		<u-modal :show="showexit" title="是否确认退出账号" :closeOnClickOverlay="true" showCancelButton @confirm="clickExit()"
			@cancel="showexit = false" @close="showexit = false"></u-modal> <!-- 退出确认模态框 -->
		<view class="user-blank" @click="clickEditUser()">
			<view class="user-avatar">
				<u-avatar :src="userInfo.avatarurl" size="70" shape="square" mode="aspectFill"></u-avatar>
			</view>
			<view class="user-info">
				<text class="user-info-item-username" v-if="islogin === false">请登录/注册</text>
				<text class="user-info-item-username">{{userInfo.nickname}}</text>
				<text class="user-info-item-userwxid" v-if="islogin === true"
					style="font-size: 20rpx; color: lightgrey;">wxid: {{userInfo.wxid}}</text>
			</view>
			<view class="user-info-click">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="info-list">
			<u-cell-group>
				<u-cell icon="/static/icon/car.png" title="我的车辆" size="large" center>
					<text slot="value" class="u-slot-value">{{carlist}}</text>
				</u-cell>
				<u-cell icon="/static/icon/house.png" title="我的房产" size="large" center>
					<text slot="value" class="u-slot-value">{{houselist}}</text>
				</u-cell>
				<u-cell icon="/static/icon/park.png" title="我的车位" size="large" center>
					<text slot="value" class="u-slot-value">{{parklist}}</text>
				</u-cell>
				<u-cell icon="edit-pen" title="编辑信息" size="large" center is-link @click="clickEditInfo()"></u-cell>
			</u-cell-group>
		</view>
		<u-gap height="100rpx" bgColor="#ffffff"></u-gap>
		<view class="login-btn">
			<u-button text="登 录" type="primary" plain size="normal" v-if="islogin === false" @click="clickLogin()"></u-button>
		</view>
		<view class="exit-btn">
			<u-button text="退出账号" type="error" plain size="normal" v-if="islogin === true" @click="showexit = true"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户信息
				userInfo: {
					id: "",
					name: "",
					phone: "",
					idnumber: "",
					wxid: "",
					photo: "",
					cars: [],
					houses: [],
					parks: [],
					bindstatus: 0, //	绑定状态 	
					changestatus: 0, //	信息变更状态 0可用 1审核中 2被拒绝
					photostatus: 0, //	头像变更状态 0可用 1审核中 2被拒绝
					avatarurl: "", //微信头像
					nickname: "" //微信昵称
				},
				//看板信息
				carlist: "",
				houselist: "",
				parklist: "",

				//参数信息
				option: {},

				//模态框控制
				showcheck: false,
				showexit: false,

				//登录态与token
				responseResult: [],
				islogin: false,
				mytoken: '', //token
			};
		},
		methods: {
			//点击编辑用户
			clickEditUser() {
				if (this.islogin) {
					/* 登录态判定 */
					if (this.userInfo.changestatus == 1) /* 信息审核中 */ {
						this.showcheck = true
					} else {
						uni.navigateTo({
							url: "/pages/user/editUser/editUser",
						})
					}
				} else {
					uni.navigateTo({
						url: "/pages/login/login" /* 未登录，跳转到登录页面 */
					})
				}
			},
			//点击编辑信息
			clickEditInfo() {
				if (this.islogin) {
					/* 登录态判定 */
					uni.navigateTo({
						url: "/pages/user/editInfo/editInfo",
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/login" /* 未登录，跳转到登录页面 */
					})
				}
			},
			//点击登录按钮
			clickLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			//确认退出
			clickExit() {
				uni.clearStorageSync(); /* 清除缓存 */
				uni.reLaunch({
					url: "/pages/home/home" /* 跳转到首页 */
				})
			},
			//从服务器获取用户信息并存储到缓存
			getUser() {
				uni.request({
					url: getApp().globalData.baseUrl+'/landlord/getMe',
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + this.mytoken
					},
					success: (res) => {
						console.log(res.data);
						this.responseResult = res.data;
						if (this.responseResult.success == true) {
							uni.setStorageSync("Id", this.responseResult.data.landlord.id)
							uni.setStorageSync("Name", this.responseResult.data.landlord.name)
							uni.setStorageSync("Phone", this.responseResult.data.landlord.phone)
							uni.setStorageSync("IdNumber", this.responseResult.data.landlord.idNumber)
							uni.setStorageSync("WxId", this.responseResult.data.landlord.wxId)
							uni.setStorageSync("Photo", this.responseResult.data.landlord.photo)
							uni.setStorageSync("Cars", this.responseResult.data.cars)
							uni.setStorageSync("Houses", this.responseResult.data.houses)
							uni.setStorageSync("Parks", this.responseResult.data.parks)
							uni.setStorageSync("BindStatus", this.responseResult.data.landlord.bindStatus)
							uni.setStorageSync("ChangeStatus", this.responseResult.data.landlord.changeStatus)
							uni.setStorageSync("PhotoStatus", this.responseResult.data.landlord.photoStatus)
						} else {
							this.$refs.uNotify.warning(this.responseResult.errorMsg)
						}
					},
					fail: (err) => {
						this.$refs.uNotify.error("请求错误: 获取用户信息失败")
					}
				});
			},
			//从缓存获取用户信息
			setUser() {
				this.userInfo.id = uni.getStorageSync("Id")
				this.userInfo.phone = uni.getStorageSync("Phone")
				this.userInfo.idnumber = uni.getStorageSync("IdNumber")
				this.userInfo.wxid = uni.getStorageSync("WxId")
				this.userInfo.cars = uni.getStorageSync("Cars")
				this.userInfo.houses = uni.getStorageSync("Houses")
				this.userInfo.parks = uni.getStorageSync("Parks")
				this.userInfo.bindstatus = uni.getStorageSync("BindStatus")
				this.userInfo.changestatus = uni.getStorageSync("ChangeStatus")
				this.userInfo.photostatus = uni.getStorageSync("PhotoStatus")

				//若获取到微信头像与昵称，则优先使用
				if (uni.getStorageSync("AvatarUrl")) {
					this.userInfo.avatarurl = uni.getStorageSync("AvatarUrl")
				} else {
					this.userInfo.avatarurl = uni.getStorageSync("Photo")
				}
				if (uni.getStorageSync("NickName")) {
					this.userInfo.nickname = uni.getStorageSync("NickName")
				} else {
					this.userInfo.nickname = uni.getStorageSync("Name")
				}
			},

		},
		computed: {
			//将车牌号转化为字符串
			toNumberList() {
				// 获取数组
				let cars = this.userInfo.cars.filter(car => car.verifyStatus === 0)
				// 提取每个对象的 number 值，并用逗号分隔
				this.carlist = cars.map(car => car.number).join(', ');
				if (this.carlist == "") {
					this.carlist = "暂无"
				}
			},
			toHouseList() {
				let houses = this.userInfo.houses.filter(house => house.verifyStatus === 0)
				this.houselist = houses.map(house => house.number).join(', ')
				if (this.houselist == "") {
					this.houselist = "暂无"
				}
			},
			toParkList() {
				let parks = this.userInfo.parks;
				this.parklist = parks.map(park => park.address).join(', ')
				if (this.parklist == "") {
					this.parklist = "暂无"
				}
			}
		},
		onLoad(e) {
			let token = uni.getStorageSync("MyToken")
			if (token) {
				this.islogin = true
				this.mytoken = token
				this.option = e //获取url后参数
				this.setUser() //从缓存获取用户信息
			} else {
				this.islogin = false
			}
		},
		onPullDownRefresh() {
			if (this.islogin === true) {
				//重新从服务器获取用户信息并存储到缓存
				this.getUser()
			}
			setTimeout(() => {
				//重新从缓存获取用户信息
				this.setUser()
				uni.stopPullDownRefresh()
			}, 1000);
		},
		onShow() {
			//如果是修改信息成功后跳转过来
			if (this.option.sign == "1") {
				this.$refs.uNotify.success(this.option.msg)
				this.option = {} /* 置空参数 */
				//自动刷新页面
				setTimeout(function() {}, 1000);
				uni.startPullDownRefresh();
			}
		}
	}
</script>

<style lang="scss">
	.base-page {
		background-color: #ffffff;
		height: 100%;
		box-sizing: border-box;
	}

	.user-blank {
		display: flex;
		background-color: #ffffff;
		height: 200rpx;

		.user-avatar {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 200rpx;
			width: 200rpx;
		}

		.user-info {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			width: 500rpx;

			.user-info-item-username {
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
				height: 100rpx;
				width: 400rpx;
				font-weight: bold;
				font-size: 50rpx;
			}

			.user-info-item-userwxid {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				height: 100rpx;
				width: 400rpx;
			}
		}

		.user-info-click {
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			height: 200rpx;
			width: 50rpx;
		}
	}

	.info-list {
		background-color: #ffffff;
	}

	.user-login {
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		display: flex;
		height: 100rpx;
		background-color: #ffffff;
		color: blue;
		text-align: center;
	}

	.login-btn {
		width: 650rpx;
		margin-left: 50rpx;
	}
	.exit-btn {
		width: 650rpx;
		margin-left: 50rpx;
	}

	.user-exit {
		bottom: 0;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		display: flex;
		height: 100rpx;
		background-color: #ffffff;
		color: red;
		text-align: center;
	}
</style>